<!--
 * @Descripttion:
 * @version:
 * @Author: sueRimn
 * @Date: 2020-10-30 11:16:33
 * @LastEditors: sueRimn
 * @LastEditTime: 2020-11-12 10:04:12
-->
<template>
  <div class="login_content">
    <div class="login_box">
      <div class="login_left">
        <div class="left_content">
          <div class="login_logo">
            <el-image class="logo_img" src="http://ntest.zhizhuedu.cn/assets/images/login-logo.fw.png" />
          </div>
          <div class="login_form">
            <el-form ref="login_form" :model="userInfo" :rules="rules">
              <el-form-item prop="name">
                <el-input v-model="userInfo.name" placeholder="请输入账号/手机号">
                  <i slot="prefix" class="el-input__icon el-icon-user-solid" /></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input v-model="userInfo.password" placeholder="请输入密码" show-password>
                  <i slot="prefix" class="el-input__icon el-icon-s-goods" />
                </el-input>
              </el-form-item>
              <el-form-item prop="visCode">
                <div class="login_code">
                  <div>
                    <el-input v-model="userInfo.visCode" placeholder="请输入验证码" />
                  </div>
                  <canvas
                    ref="canvas"
                    class="text_code"
                    @click="get_vis_code"
                  />
                </div>
              </el-form-item>
              <el-form-item>
                <div class="login_btn" @click="login('login_form')">登录</div>
              </el-form-item>
              <div class="check_pass">
                <el-checkbox v-model="userInfo.isRemember">记住密码</el-checkbox>
              </div>
            </el-form>
          </div>
        </div>
      </div>
      <div class="login_right">
        <el-carousel height="540px" direction="vertical">
          <el-carousel-item v-for="item in urls" :key="item">
            <!-- <h3 class="medium">{{ item }}</h3> -->
            <el-image :src="item" fit="cover" style="height:100%" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</template>

<script>
import { draw } from '@/utils/Verification'
import { setIsRemember, getIsRemember } from '@/utils/auth'
export default {
    data() {
        return {
            urls: [
                'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
                'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
                'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
                'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
                'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
                'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
                'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
            ],
            userInfo: {
                name: '',
                password: '',
                visCode: '',
                isRemember: false
            },
            VisCode: '', // 验证码
            rules: {
                name: [
                    { required: true, message: '请输入账号', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ],
                visCode: [
                    { required: true, message: '请输入验证码', trigger: 'blur' }
                ]
            }
        }
    },
    mounted() {
        var locaData = getIsRemember()
        if (locaData) {
            var obj = JSON.parse(locaData)
            this.userInfo.name = obj.username
            this.userInfo.isRemember = obj.isRemember
            if (obj.isRemember) {
                this.userInfo.password = obj.password
            }
        }
        this.get_vis_code()
    },
    methods: {
        login(formName) {
            this.$refs[formName].validate(async(valid) => {
                if (valid) {
                    if (this.VisCode != this.userInfo.visCode) {
                        this.get_vis_code()
                        return this.$message.error('验证码输入不一致')
                    }
                    const loading = this.$loading({
                        lock: true,
                        text: '正在登录请稍后',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    })
                    var queryData = {
                        username: this.userInfo.name,
                        password: this.userInfo.password
                    }
                    this.$store.dispatch('user/login', queryData).then((res) => {
                        if (res.code == 200) {
                        // 记住密码
                            if (this.userInfo.isRemember) {
                                queryData.isRemember = this.userInfo.isRemember
                                setIsRemember(JSON.stringify(queryData))
                            }
                            this.$router.push({ path: '/' })
                        }
                        this.get_vis_code()
                        loading.close()
                    }).catch(() => {
                        this.get_vis_code()
                        loading.close()
                    })
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        // 获取限制验证码
        get_vis_code() {
            this.VisCode = this.rand(1000, 9999).toString()
            draw(this.VisCode.split(''), this.$refs.canvas)
        },
        rand(min, max) {
            return Math.floor(Math.random() * (max - min)) + min
        }
    }
}
</script>

<style scoped lang='scss'>
.login_content {
    width: 100%;
    height: 100%;
    // background: #304156;
    background: url('../../assets/bg_images/bg17.png') no-repeat center center, linear-gradient(180deg, rgba(190, 226, 201, 1) 0%, rgba(152, 212, 207, 1) 100%);
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.login_box {
    width: 900px;
    min-width: 900px;
    height: 540px;
    margin-top: 8%;
    border-radius: 8px;
    box-shadow: 5px 6px 14px 0px #61bbbb;
    overflow: hidden;

    display: flex;
    justify-content: space-between;

    .login_left {
        width: 500px;
        height: 100%;
        display: flex;
        justify-content: center;
        box-sizing: border-box;
        background: #fff;

        .left_content {
            width: 400px;
            padding: 28px 40px;
            margin-top: 40px;
            box-sizing: border-box;
        }

        .login_logo {
            width: 100%;
            height: 100px;

            .logo_img{
                width: 100%;
                height: 100%;
            }
        }

        .login_form {
            width: 100%;
            height: 200px;
            margin-top: 20px;

            .login_code {
                width: 100%;
                display: flex;
                justify-content: space-between;
                text-align: center;

                .text_code {
                    width: 120px;
                    height: 40px;
                    cursor: pointer;
                    background: #eee;
                }
            }

            .login_btn {
                width: 100%;
                line-height: 40px;
                text-align: center;
                background:linear-gradient(to right, #27bdaf, #3dd3c5);
                color: #fff;
                cursor: pointer;

                &:hover {
                    opacity: 0.8;
                }
            }

            .check_pass {
                float: right;
            }
        }
    }

    .login_right {
        width: 390px;
        height: 100%;
    }
}

</style>
